import React, {Component} from 'react';
import {Popup,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar,CheckboxField,Toast,Grid,Dialog,Scroller  } from 'saltui';

import Number from  '../../room/Number'
import InputText from '../diy/InputText'
import InputChecked from '../diy/InputChecked'
import  Ajax  from '../../../../Common/Ajax';
import InputSelected from '../diy/InputSelected'
import HDateTime from '../diy/HDateTime'

/**
 *  <RoomCellExChange fromRoom={this.props}  toRoom={this.props} initList={this.props} typeid={this.props} />
 */
export default class RoomCellExChange extends React.Component {
  constructor(props) {


    super(props);
    this.state = {
      fromRoom: this.props.fromRoom,
      toRoom: this.props.toRoom,
      typeid:this.props.typeid
    };
    this.post = {
      exChangePrice:{
        from_room_id:this.props.fromRoom.id,
        to_room_id:this.props.toRoom.id,
        start_date:this.props.fromRoom.start_date,
        end_date:this.props.fromRoom.end_date,
      },
    }


  }

  componentWillMount() {
    Ajax.post("room//ex/price",this.post.exChangePrice,this._dateSuccess);
  }

  handExChange = () =>{
    Toast.show({
      type: 'loading',
      content: '保存中...',
      autoHide:false
    });



    setTimeout(() => {
      Ajax.post("room/ex/room",this.post.exChangePrice);
      Toast.hide(() => {
      });

      Toast.show({
        type: 'loading',
        content: '保存成功',
      });

      Popup.hide();
      this.props.exChange(0,0);
      this.props.initList(this.state.typeid);
    }, 2000);
  }

  _dateSuccess = (data) =>{
    let toRoom = this.state.toRoom;
    toRoom.prices= data.prices;
    toRoom.total_price= data.total_price;
    toRoom.diff_price = data.diff_price;
    this.setState({
      toRoom:toRoom
    })
  }

  netCountPrice = (date) =>{

    this.post.exChangePrice.start_date = date[0];
    this.post.exChangePrice.end_date = date[1];

    Ajax.post("room//ex/price",this.post.exChangePrice,this._dateSuccess);

  }


  render() {
    let that = this;
    return <div className="demo-popup-container">

      <div className="H-Scroller">

        {/* from room */}
        <div className="notice-div">
          <NoticeBar className="noticeMessage" message={"要退的客房"} closable={false} type="success" />
        </div>

        <div className='b-row'>
        <Grid col={4} className="t-BCf H-room-handle-content"　itemHAlign="start" itemVAlign="start"　 >
        <div className="H-left">
          <div className="b-col-12 H-abstract">
            <h3>楼层&房号&客房类型</h3>
          </div>

          <div className="b-col-12">
            <h3>{this.state.fromRoom.floor_name}</h3>
          </div>
          <div className="b-col-12">
            <h3>{this.state.fromRoom.room_name}</h3>
          </div>
          <div className="b-col-12">
            <h3>{this.state.fromRoom.typeName}</h3>
          </div>

        </div>

        <div className="H-left">
          <div className="b-col-12 H-abstract">
            <h3>最多人数&设施</h3>
          </div>

          <div className="b-col-12">
            <h3>{this.state.fromRoom.people_num}</h3>
          </div>
          <div className="b-col-12">
            <h3>{this.state.fromRoom.amenities.join(",")}</h3>
          </div>

        </div>

        <div className="H-left">
          <div className="b-col-12 H-abstract">
            <h3>入住时间</h3>
          </div>

          <div className="b-col-12 H-datetime" >
            <span>{this.state.fromRoom.start_date}</span>
          </div>
          <div className="b-col-12 H-datetime" >
            <span>{this.state.fromRoom.end_date}</span>
          </div>

        </div>

        <div className="H-right">
          <div className="b-col-12 H-abstract">
            <h3>入住价格</h3>
          </div>

          <div className="b-col-12 total">
            <span>总计</span> <span>${this.state.fromRoom.total_price} USD</span>
          </div>

        </div>
        </Grid>
        </div>

        {/* to room */}
        <div className="notice-div">
          <NoticeBar className="noticeMessage" message={"要换的客房"} closable={false} type="warning" />
        </div>

        <div className='b-row'>
          <Grid col={4} className="t-BCf H-room-handle-content"　itemHAlign="start" itemVAlign="start"　 >


            <div className="H-left">
              <div className="b-col-12 H-abstract">
                <h3>楼层&房号&客房类型</h3>
              </div>

              <div className="b-col-12">
                <h3>{this.state.toRoom.floor_name}</h3>
              </div>
              <div className="b-col-12">
                <h3>{this.state.toRoom.room_name}</h3>
              </div>
              <div className="b-col-12">
                <h3>{this.state.toRoom.typeName}</h3>
              </div>

            </div>

            <div className="H-left">
              <div className="b-col-12 H-abstract">
                <h3>最多人数&设施</h3>
              </div>

              <div className="b-col-12">
                <h3>{this.state.toRoom.people_num}</h3>
              </div>
              <div className="b-col-12">
                <h3>{this.state.toRoom.amenities.join(",")}</h3>
              </div>

            </div>

            <div className="HH-left">
              <div className="b-col-12 H-abstract">
                <h3>入住时间</h3>
              </div>

              <div className="b-col-12 H-datetime" >
                <span> <HDateTime onChange={this.netCountPrice}  start_date={this.state.toRoom.start_date}  end_date={this.state.toRoom.end_date} /> </span>
              </div>
            </div>

            <div className="H-right">
              <div className="b-col-12 H-abstract">
                <h3>入住价格</h3>
              </div>

              {
                this.state.toRoom.prices.map((price,index) =>
                  <div className= {index == 0 ? 'b-col-12 subtotal' : 'b-col-12 especially'}>
                    <span>{price.name}</span> <span>${price.number} USD</span>
                  </div>
                )
              }

              <div className="b-col-12 total">
                <span>总计</span> <span>${this.state.toRoom.total_price} USD</span>
              </div>

              {(typeof  this.state.toRoom.diff_price !== 'undefined') ?
                <div className="b-col-12 total">
                  <span>差价</span> <span>${this.state.toRoom.diff_price} USD</span>
                </div>
                :""}

            </div>

          </Grid>
        </div>


        <div className="notice-div">
          <NoticeBar className="noticeMessage" message={"客房详细"} closable={false} type="warning" />
        </div>
        <Group.List className="H-room-handle-guest" >

          {
            this.state.fromRoom.guest.map((people,index) =>
              <Field label={"客人3"+(index+1)}>
                <div>
                  <InputText value={people.guest_name} placeholder="姓名" readOnly={true}  />
                  <InputText value={people.guest_idcard}  placeholder="id卡" readOnly={true}  />
                </div>
              </Field>
            )
          }
        </Group.List>
        </div>


      <div className="demo-line">
        <Button type="secondary"  size="small"  onClick={this.handExChange}  >确认换房</Button>
        <Button type="secondary"  size="small"  >取消</Button>
      </div>

    </div>
  }
}
